<!DOCTYPE HTML>
<html>
<head>
    <title>Codes</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=Ta27XmBT0ii84fbwXqEir0EaFqDhD2BZ"></script>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="js/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen"/>
    <script src="js/bootstrap.js"></script>
	<style>
		#map{
			margin-left: 200px;
		}
		#container {
			height: 500px;
			width: 500px;
		}
	</style>
</head>
<body>
	<div id="app">
		<el-tabs style="margin-left: 200px" v-model="activeName" @tab-click="handleClick">
			<el-tab-pane  label="发布出租车位" name="first">
				发布车位功能
				<el-row>
					<el-col :span="4"></el-col>
					<el-col :span="6">
						<el-form :model="addForm">
								<el-form-item label="车位物理地址" >
									<el-input v-model="addForm.parkspaceLong" autocomplete="off" placeholder="车位经度" :disabled="true"></el-input>
									<el-input v-model="addForm.parkspaceLati" autocomplete="off" placeholder="车位纬度" :disabled="true"></el-input>
								</el-form-item>
								<el-form-item label="车位详细地址" >
									<el-input v-model="addForm.parkspaceAddress" autocomplete="off" placeholder="请输入您的车位详细地址"></el-input>
								</el-form-item>
								<el-form-item label="小区车位号" >
									<el-input v-model="addForm.parkspaceNum" autocomplete="off" placeholder="请输入您的小区车位号（没有不填）"></el-input>
								</el-form-item>
								<el-form-item label="每小时车位收费" >
									<el-input v-model="addForm.parkspacePriceHour" autocomplete="off" placeholder="请输入您预设的车位费（默认10元/小时)"></el-input>
								</el-form-item>
								<!--新增-->
								<el-form-item>
									<el-button type="primary" @click="addSubmit">上架</el-button>
								</el-form-item>
						</el-form>
					</el-col>
					<el-col :span="10" id="map">
						请在地图上选择您要上架的车位位置，务必精确选择！
						<div id="container" class="container" ></div>
					</el-col>
				</el-row>
			</el-tab-pane>
			<el-tab-pane label="查看出租情况" name="second">
				<el-form :inline="true" :model="searchForm" class="demo-form-inline">
					<el-form-item label="时间范围">
						<div class="block">
							<el-date-picker
									v-model="searchForm.orderSpacerecordTime"
									type="daterange"
									range-separator="至"
									start-placeholder="入库时间"
									end-placeholder="出库时间"
									value-format="yyyy-MM-dd HH:mm:ss">
							</el-date-picker>
						</div>
					</el-form-item>
					<el-form-item label="车位号">
						<el-input v-model="searchForm.orderParkspaceNum" placeholder="车位号"></el-input>
					</el-form-item>
					<el-form-item label="每页显示条数">
						<el-select v-model="searchForm.pageSize" placeholder="">
							<el-option label="2" value="2"></el-option>
							<el-option label="5" value="5"></el-option>
							<el-option label="10" value="10"></el-option>
							<el-option label="20" value="20"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">查询</el-button>
					</el-form-item>
				</el-form>

				<el-table :data="tableData" style="width: 100%">
					<el-table-column
							label="序号"
							type="index"
							:index="indexMethod">
					</el-table-column>
					<el-table-column prop="orderLicense" label="车牌号" width="80">
					</el-table-column>
					<el-table-column prop="orderParkspaceId">
					</el-table-column>
					<el-table-column prop="orderSpacerecordTimeStart" label="入场时间" width="180">
					</el-table-column>
					<el-table-column prop="orderSpacerecordTimeEnd" label="出场时间" width="180">
					</el-table-column>
					<el-table-column prop="orderInImg" label="车辆入场图片">
						<template slot-scope="scope">
							<el-image
									style="width: 100px; height: 100px"
									:src="scope.row.orderInImg">
							</el-image>
						</template>
					</el-table-column>
					<el-table-column prop="orderOutImg" label="车辆出场图片">
						<template slot-scope="scope">
							<el-image
									style="width: 100px; height: 100px"
									:src="scope.row.orderOutImg">
							</el-image>
						</template>
					</el-table-column>
					<el-table-column prop="orderParkAddress" label="车场">
					</el-table-column>
					<el-table-column prop="orderParkspaceNum" label="车位号">
					</el-table-column>
					<el-table-column prop="orderParkspaceStatus" label="车辆停车状态">
						{{action}}
					</el-table-column>
					<el-table-column
							fixed="right"
							label="操作"
							width="100">
						<template slot-scope="scope">
							<el-row>
								<el-button @click="checkClick(scope.row)" type="primary" size="big">查看</el-button>
							</el-row>
						</template>
					</el-table-column>
				</el-table>
				<!--分页-->
				<el-pagination
						layout="prev, pager, next"
						:total="totalCount" :page-size="pageSize" :current-page="curr" @current-change="jump">
				</el-pagination>
			</el-tab-pane>
<!--			<el-tab-pane label="查看历史租赁" name="third">-->
<!--				查看历史租赁-->
<!--			</el-tab-pane>-->
			<el-tab-pane label="推荐" name="fourth">
				<DIV>
					<el-button @click="open" TYPE="text">推荐给其他人，其他人注册成功后赠送双方账户各赠送1张满50-20优惠券</el-button>
				</DIV>
			</el-tab-pane>
		</el-tabs>


	</div>
	<script src="js/jquery-3.5.1.js"></script>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/axios.js"></script>
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script>
		var vm = new Vue({
			el:"#app",
			data: {
				addForm:{
					parkspaceLong:'经度',
					parkspaceLati:'纬度',
					parkspaceAddress:'默认地址',
					parkspacePriceHour:'10',
					parkspaceNum:'1'
				},
				// activeIndex: '1',
				activeName: 'first',
				tableData: [],
				fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
				action: '',
				searchForm: {
					orderSpacerecordTime: '',
					orderParkspaceNum: '',
					pageSize: ''
				},
				totalCount: 0,
				//当前页
				curr: 1,
				pageSize: 2
			},
			methods: {
				// handleSelect:function(key, keyPath) {
				// 	console.log(key, keyPath);
				// },
				handleClick:function(tab, event) {
					console.log(tab, event);
				},
				addSubmit:function(){
					if((parseInt(vm.addForm.parkspacePriceHour)<=0)){
						this.$message({
							message:'每小时单价必须大于0',
							type:'error',
						});
						return;
					}else{
						console.log("添加车位")
						axios.post("/insertPark",[{
							parkspacePriceHour:vm.addForm.parkspacePriceHour,
							parkspaceLong: vm.addForm.parkspaceLong,
							parkspaceLati: vm.addForm.parkspaceLati,
							parkspaceAddress:vm.addForm.parkspaceAddress,
							parkspaceNum:vm.addForm.parkspaceNum
						}])
								.then(function(resp){
									// console.log(resp);
									if(resp.data.success){
										vm.$message({
											message:'新增成功',
											type:'sucess'
										})
									}else{
										vm.$message({
											message:"用户权限不足或系统错误",
											type:'sucess'
										})
									}
								})
					}

				},
				//查看出租情况方法
				indexMethod(index) {
					return index * 1;
				},
				onSubmit: function () {
					var f = this.searchForm;
					var vm = this;
					var params = {
						orderParkspaceId: f.orderParkspaceNum,
						orderSpacerecordTimeStart: f.orderSpacerecordTime[0],
						orderSpacerecordTimeEnd: f.orderSpacerecordTime[1],
						pageSize: f.pageSize
					}
					console.log(f.pageSize);

					this.doQuery(params);
				},
				open: function () {
					var vm = this;
					axios.get('code')
					.then(function (resp) {
						if(resp.data.success){
							var a = resp.data.object;
							vm.$alert(a, '邀请码(分享给其他人注册时填入)', {
								confirmButtonText: '确定'
							});

						}
					})
				},
				changeStatus(status) {
					var k = this;
					if (status == 0) {
						k.action = "已预订";
					}
					if (status == 1) {
						k.action = "已驶入";
					}
					if (status == 2) {
						k.action = "已驶离";
					}
					if (status == 3) {
						k.action = "已取消";
					}
				},
				checkClick: function (par) {
					window.location.href = "/commentTest.html";
					sessionStorage.setItem("PICURL", par.orderInImg);
					sessionStorage.setItem("PARKID", par.orderParkspaceId)

				},
				jump: function (curr) {
					var f = this.searchForm;
					var vm = this;
					var params = {
						orderParkspaceId: f.orderParkspaceNum,
						orderSpacerecordTimeStart: f.orderSpacerecordTime[0],
						orderSpacerecordTimeEnd: f.orderSpacerecordTime[1],
						pageIdx: curr,
						pageSize: vm.pageSize
					}
					this.doQuery(params)
				},
				doQuery: function (params) {
					var vm = this;
					axios.get('order/show', {params: params})
							.then(function (resp) {
								if (resp.data.success) {
									vm.tableData = resp.data.object.records;
									for (let j = 0; j < resp.data.object.records.length; j++) {
										var status = resp.data.object.records[j].orderParkspaceStatus;
										vm.changeStatus(status);
									}
									vm.totalCount = resp.data.object.total;
									vm.curr = resp.data.object.current;
									vm.pageSize = resp.data.object.size;
								}
							})
				},
			},
			mounted: function () {
				// var vm = this;
				var params = {};
				this.doQuery(params);

				/*地图控件*/
				//判断是否支持 获取本地位置
				//获取当前地理信息
				window.navigator.geolocation.getCurrentPosition(success, error);
				//获取地理信息成功时的回调函数
				function success(position) {
					//从coords属性中获取经度维度信息
					var lat = position.coords.latitude;
					var lon = position.coords.longitude;
					console.log("当前位置："+lat+"-"+lon)
					//创建地图对象
					var map = new BMap.Map("container");
					//设置地址的经纬度
					var point = new BMap.Point(lon, lat);
					//设置地图模式
					map.setMapType(BMAP_NORMAL_MAP);
					//设置地图中心
					map.centerAndZoom(point, 15);
					map.enableScrollWheelZoom(true);
					//设置地图覆盖点
					var marker = new BMap.Marker(point);
					map.addOverlay(marker);
					//添加地图监听事件
					map.addEventListener('click',function(e){
						//清除地图覆盖物
						map.clearOverlays();
						var long = e.point.lng;
						var lati = e.point.lat;
						console.log(long+"经纬度"+lati)
						//设置地图中心
						map.centerAndZoom(new BMap.Point(long,lati),19);
						//设置地图覆盖点
						var marker_point=new BMap.Point(long,lati);
						var marker = new BMap.Marker(marker_point);
						map.addOverlay(marker);
						vm.addForm.parkspaceLong=long;
						vm.addForm.parkspaceLati=lati;
						console.log("经纬度"+vm.addForm.parkspaceLong)
						// //获取当前鼠标的位置
						// var x = event.clientX;
						// var y = event.clientY;
						// console.log(x + "-" + y)
						// $(".reserve_pic").html("<img src='/images/car-icon.jpg' height='30px' width='30px'/>");
						// var url1 = 'http://192.168.80.64:8080/index.html';
						// // $(".reserve_button").html("<input type='button' parkId='"+this.customData.split("-")[3]+"' onclick='function x1() {window.open(url1);}' class='submitpark' value='预定'/>");
						// $(".reserve_button").html('<a style="background-color:green;color:white;width:50px" href="http://192.168.80.64:8080/pay.html?parkId=1&parkAddress=1&parkPrice=1">选择改点</a>');
						// $(".reserve").css({
						// 	"top": y + 40 + "px",
						// 	"left": x + "px",
						// 	"display": "block"
						// });
						// marker.addEventListener('blur',function(){
						// 	$(".reserve").css("display","none");
						// });
					});

				}

				//获取地理信息失败时的回调函数
				function error(msg) {
					alert("获取您的地理信息失败");
				}
			}
		})
	</script>
</body>
</html>
